<template>
    <view class="withdrawalDetail">
        <Navigation title="提现明细" backType="back" background="#fff" />
        <view class="f ph-40 pv-40 price w-f">
            <view class="box">
                <view class="fs-32 text-color4">已提现</view>
                <view class="mt-8">
                    <text class="fs-28 fw-600 text-color4">¥</text>
                    <text class="fs-44 fw-600 text-color4">{{wallet.totalCrashOut}}</text>
                </view>
            </view>
            <view class="su w-1 h-98 mr-33"></view>
            <view class="box">
                <view class="fs-32 text-color4">待审核</view>
                <view class="mt-8">
                    <text class="fs-28 fw-600 text-color4">¥</text>
                    <text class="fs-44 fw-600 text-color4">{{wallet.totalCrashOut}}</text>
                </view>
            </view>
        </view>
        <view class="bg">
            <view class="list w-f ph-40 pv-32 f ai-c jc-s-b" v-for="(item,index) in list">
                <view>
                    <view class="f ai-c">
                        <view class="fs-28 text-color4 mr-8">提现</view>
                        <view class="w-82 h-32 f ai-c jc-c fs-22  examine b-4" v-if="item.approvalStatus==0">审核中</view>
                        <view class="w-60 h-32 f ai-c jc-c fs-22  success b-4" v-if="item.approvalStatus==1">成功</view>
                        <view class="w-60 h-32 f ai-c jc-c fs-22  examine b-4" v-if="item.approvalStatus==2">驳回</view>
                    </view>
                   
                    <view class="fs-22 text-color3 mt-10">{{item.collectionTime}}</view>
                </view>
                <view class="fs-36 fw-600 text-color4">-{{item.money}}</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue';
import { crashPage,walletGet } from '@/services/api/index';
import {onShow, onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
const list = ref<any[]>([]);
const wallet = ref({});
const { proxy } = getCurrentInstance();
const listParams = ref<any>({
	
	    pageNo: 1,
	    pageSize: 10,
	});
	onShow(() => {
	
		getList();
		getWallet()
	});
	async function getList() {
		    const { data } = await crashPage(listParams.value);
			data.list.forEach((item: any) => {
				if(item.collectionTime != null){
					item.collectionTime = timestampToTime(item.collectionTime);
				}
			});
		    list.value = list.value.concat(data.list);
		}	
		function timestampToTime(timestamp:number) {
		  // 时间戳为10位需*1000，时间戳为13位不需乘1000
		  var date = new Date(timestamp);
		  var Y = date.getFullYear() + "-";
		  var M =
		    (date.getMonth() + 1 < 10
		      ? "0" + (date.getMonth() + 1)
		      : date.getMonth() + 1) + "-";
		  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
		  var h = date.getHours() + ":";
		  var m = date.getMinutes() + ":";
		  var s = date.getSeconds();
		  return Y + M + D + h + m + s;
		}
		//钱包
		async function getWallet() {
		    const { data } = await walletGet();
		    wallet.value = data;
			
		}
		//下拉刷新
			onPullDownRefresh(() => {
			    list.value = [];
			    listParams.value.pageNo = 1;
			    getList();
			});
			//上拉加载
			onReachBottom(() => {
			    listParams.value.pageNo++;
			    getList();
			});
</script>
<style lang="scss" scoped>
.withdrawalDetail {
    background: #f5f5f5;
    min-height: 100vh;
    .success{
        background: #E6FFEF;
        color: #25B85B;
    }
    .examine{
        color: #FA7F28;
        background: #FFF5ED;
    }
    .list {
        border-bottom: 1px solid #f5f5f5;
    }
    .bg {
        background: #fff;
        min-height: 100vh;
        border-radius: 24rpx 24rpx 0 0;
    }
    .price{
        .su{          
            background: #DDDDDD;
        }
        .box{
            width: 50%;
        }
    }
}
</style>